<template>
  <n-modal
    :show="show"
    @update:show="handleUpdateShow"
    preset="card"
    :style="{ width: '400px' }"
    :mask-closable="false"
    transform-origin="center"
  >
    <div class="login-header">
      <n-avatar
        :size="64"
        :src="logoUrl"
        fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
      />
      <h2 class="login-title">欢迎登录</h2>
      <p class="login-subtitle">登录后体验更多功能</p>
    </div>
    
    <n-form
      ref="formRef"
      :model="formValue"
      :rules="rules"
      label-placement="left"
      label-width="0"
      class="login-form"
    >
      <n-form-item path="username">
        <n-input
          v-model:value="formValue.username"
          placeholder="请输入用户名"
          :maxlength="20"
          clearable
        >
          <template #prefix>
            <n-icon><person-outline /></n-icon>
          </template>
        </n-input>
      </n-form-item>
      
      <n-form-item path="password">
        <n-input
          v-model:value="formValue.password"
          type="password"
          show-password-on="click"
          placeholder="请输入密码"
          :maxlength="20"
        >
          <template #prefix>
            <n-icon><lock-closed-outline /></n-icon>
          </template>
        </n-input>
      </n-form-item>

      <div class="login-options">
        <n-checkbox v-model:checked="rememberMe">
          <span class="remember-text">记住我</span>
        </n-checkbox>
        <n-button text type="primary" class="forgot-password">
          忘记密码？
        </n-button>
      </div>

      <n-button
        type="primary"
        block
        @click="handleLogin"
        :loading="loading"
        class="login-button"
      >
        登 录
      </n-button>

      <div class="other-login">
        <div class="divider">
          <span class="divider-text">其他登录方式</span>
        </div>
        <div class="social-login">
          <n-button quaternary circle class="social-icon">
            <template #icon>
              <n-icon><logo-github /></n-icon>
            </template>
          </n-button>
          <n-button quaternary circle class="social-icon">
            <template #icon>
              <n-icon><logo-google /></n-icon>
            </template>
          </n-button>
          <n-button quaternary circle class="social-icon">
            <template #icon>
              <n-icon><chatbubble-outline /></n-icon>
            </template>
          </n-button>
        </div>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage } from 'naive-ui'
import {
  PersonOutline,
  LockClosedOutline,
  LogoGithub,
  LogoGoogle,
  ChatbubbleOutline
} from '@vicons/ionicons5'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
}>()

const message = useMessage()
const loading = ref(false)
const logoUrl = ref('')

const formValue = ref({
  username: '',
  password: ''
})

const rememberMe = ref(false)

const rules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }
}

const handleUpdateShow = (value: boolean) => {
  emit('update:show', value)
}

const handleClose = () => {
  emit('update:show', false)
  formValue.value = {
    username: '',
    password: ''
  }
}

const validateLogin = (username: string, password: string): boolean => {
  return username === 'admin' && password === 'admin'
}

const handleLogin = async () => {
  loading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    if (validateLogin(formValue.value.username, formValue.value.password)) {
      message.success('登录成功')
      localStorage.setItem('isLoggedIn', 'true')
      localStorage.setItem('username', formValue.value.username)
      if (!localStorage.getItem('userAvatar')) {
        localStorage.setItem('userAvatar', 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg')
      }
      if (rememberMe.value) {
        localStorage.setItem('rememberedUsername', formValue.value.username)
      } else {
        localStorage.removeItem('rememberedUsername')
      }
      window.dispatchEvent(new CustomEvent('login-success'))
      handleClose()
    } else {
      message.error('用户名或密码错误')
    }
  } catch (error) {
    message.error('登录失败')
  } finally {
    loading.value = false
  }
}

if (localStorage.getItem('rememberedUsername')) {
  formValue.value.username = localStorage.getItem('rememberedUsername') || ''
  rememberMe.value = true
}
</script>

<style scoped>
.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.login-title {
  margin: 16px 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--n-text-color);
}

.login-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--n-text-color-3);
}

.login-form {
  padding: 0 8px;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-text {
  font-size: 14px;
  color: var(--n-text-color-2);
}

.forgot-password {
  font-size: 14px;
}

.login-button {
  margin-bottom: 24px;
  height: 40px;
  font-size: 16px;
}

.other-login {
  margin-top: 24px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 16px 0;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 100px);
  height: 1px;
  background-color: var(--n-border-color);
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider-text {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  color: var(--n-text-color-3);
  background-color: #fff;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.social-icon {
  font-size: 20px;
}

:deep(.n-input .n-input__prefix) {
  margin-right: 8px;
}

:deep(.n-button.n-button--quaternary) {
  width: 40px;
  height: 40px;
}
</style> 